<template>
    <div class="p-2">
        <transition>
            <el-tabs v-model="activeTab" @tab-change="tabChange">
                <el-tab-pane name="commission">
                    <template #label>
                        <span>{{ useNotice.waitCount == 0 ? '待办列表' : `待办列表(${useNotice.waitCount})` }}</span>
                    </template>
                    <Commission v-if="activeTab == 'commission'" :queryType="queryType" />
                </el-tab-pane>
                <el-tab-pane name="notification">
                    <template #label>
                        <el-badge :is-dot="useNotice.readCount !== 0">
                            <span>通知消息</span>
                        </el-badge>
                    </template>
                    <Notification v-if="activeTab == 'notification'" :queryType="queryType" />
                </el-tab-pane>
            </el-tabs>
        </transition>
    </div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
import Commission from './commission.vue'
import Notification from './notification.vue'
import useUseNotice from '@/store/modules/notice';

const useNotice = useUseNotice();


const activeTab = ref('commission');
const props = defineProps(['queryType'])
const tabChange = async () => {
    await useNotice.QueryDeptCount()
}

onMounted(() => {
    useNotice.QueryDeptCount()
})

</script>
<style lang="scss" scoped></style>